import React from 'react';
import { connect } from 'dva';
import { ListView, Icon, Badge } from 'antd-mobile';
import avatar from '../../../../../../../../framework/utils/avatar';
import cutStr from '../../../../../../../../framework/utils/cutStr';
import styles from './myPartTimeItem.css';
import btnTypes from './btnListJson';

import check from '../../../../../../../../icons/personal/checked-icon.png';

const MyPartTimeItem = ({
  item={},
  onViewMember=()=>{},
  showLimit=()=>{},
  onCancel=()=>{},
  sellerPhone=()=>{},
  complaintPost=()=>{},
  signIn=()=>{},
  remind=()=>{},
  appraise=()=>{},
}) => {

  // console.log('我的兼职 item', JSON.stringify(item));

  const renderAge = (birthday) => {
    if (birthday && birthday != '') {
      return date.age(birthday) + "岁";
    }
  }
  const baseStyle = {
    backgroundColor: 'transparent',
    borderRadius: 4,
    color: '#333',
    marginRight: 10,
  };
  const boxStyle = {
    ...baseStyle,
    lineHeight:'20px',
    color: '#ABABAB',
    border: '1PX solid #ABABAB',
    fontSize: '10px',
  };

  //取消报名 -- type 1
  //联系商家 -- type 2
  //投诉职位 -- type 3
  //签到 -- type 4
  //提醒结算 -- type 5
  //签到 -- type 6
  const btnClickType = (clickType, item) =>{

    if(clickType == 1){
      onCancel(item);
    }else if(clickType == 2){
      sellerPhone(item);
    }else if(clickType == 3){
      complaintPost(item);
    }else if(clickType == 4){
      signIn(item);
    }else if(clickType == 5){
      remind(item);
    }else if(clickType == 6){
      appraise(item);
    }
  }

  const showBtn = (item)=>{
    const { status,commented } = item;
    // return;
    let btnList = '';
    let newBtnList = [];
    if(status == 'AUDITING'){
      btnList = btnTypes.signUpBtnsJson();
    }else if(status == 'CONFIRMING'){
      btnList = btnTypes.admissionBtnsJson();
    }else if(status == 'SETTLING'){
      btnList = btnTypes.workBtnsJson();
    }else if(status == 'SETTLED'){
      btnList = btnTypes.settlementBtnsJson();
      if(commented == 1){
        btnList.map((item, index) => {
          if(item.label != '评价'){
            newBtnList.push(item);
          }
        })
        btnList = newBtnList;
      }
    }else{
      btnList = '';
    }

    // console.log(status,btnList);
    if(!btnList){
      return;
    }

    return btnList.map((btnItem, btnIndex) => {
      return (
        <div key={btnItem.id.toString()}
          className={styles.btnItem}
          onClick={(e) => btnClickType(btnItem.clickType,item)}
          >
          <span>{btnItem.label}</span>
          {btnItem.showPartingLine ? (
            <div className={styles.partingLine}>
              <div className={styles.lineBody}></div>
            </div>
          ):''}
        </div>
      )
    })
  }

  const showStatus = (status) => {

    let statusText = '';
    if(status == 'AUDITING'){
      statusText = '待录用';
    }else if(status == 'SIGNING'){
      statusText = '待签到';
    }else if(status == 'SETTLING'){
      statusText = '待结算';
    }else if(status == 'SETTLED'){
      statusText = '已结算';
    }else if(status == 'UNSEEMLINESS'){
      statusText = '不适合';
    }
    return (<span className={styles.status}>{statusText}</span>)
  }

  return (
    <div key={item.id.toString()} >
      <div className={styles.content}>
        <div className={styles.avatar} onClick={() => showLimit(item.job.id)}>{avatar(item.typeName, item.avatar)}</div>
        <div className={styles.detail} onClick={() => onViewMember(item.job.id)}>
          <div className={styles.item}>
            <div className={styles.name}>
              <span>{cutStr.cutString(item.job.title, 20)}</span>
              {showStatus(item.status)}
            </div>
            {item.status == 'SETTLED' ? (
              <div>
                <div className={styles.price}>
                    <span className={styles.applyTime}>{item.applyTime} </span>
                </div>
                <div className={styles.price}>{item.job.wage}</div>
              </div>
            ):(
              <div className={styles.price}>
                  <span style={{marginRight: '0.8em'}}>{item.job.wage} </span>
                  <span className={styles.applyTime}>{item.applyTime} </span>
              </div>
            )}

          </div>
          {/* <div className={styles.partTimeStatus}> */}
          {/*  待录用   */}
          {/* </div> */}
        </div>
      </div>
       <div className={styles.btns}>
        {showBtn(item)}
      </div>

    </div>
  );
};

MyPartTimeItem.propTypes = {
};

export default connect()(MyPartTimeItem);
